Skip to content

Bug fixes: Improve Task Workflows, Project Permissions, Pagination, and UI Consistency - #98

Open
shweta2101 wants to merge 12 commits into
developfrom
bugfix-4077-tasks-limit
Open

Bug fixes: Improve Task Workflows, Project Permissions, Pagination, and UI Consistency#98
shweta2101 wants to merge 12 commits into
developfrom
bugfix-4077-tasks-limit

Conversation

@shweta2101

@shweta2101 shweta2101 commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

DevBoard Tasks

  1. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4076
  2. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4082
  3. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4083
  4. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4079
  5. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4080
  6. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4087
  7. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4085
  8. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4075
  9. https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/4077

Changes implemented

  • Added separate mapper and validator task editor panels based on task status.
  • Limited validation feedback controls to tasks awaiting review.
  • Added self-validation prevention for the last mapper.
  • Updated task status labels, actions, timer, sidebar width, and review option styling.
  • Added project-role loading and permission error handling.
  • Added paginated API loading for projects containing more than 1,000 tasks.
  • Fixed rich-text editor input and consistent HTML sanitization.
  • Added accessible keyboard navigation for task editor tabs.
  • Added proper area-unit formatting with km² and mi² options during project creation and task generation.
  • Improved task-generation button alignment and styling.
  • Removed inactive three-dot menus from project cards.
  • Consolidated duplicated styles and moved reusable colors into theme variables.
  • Extracted/precomputed derived UI state following Vue/Nuxt guidelines.
  • Added cleanup for Rapid event listeners.
  • Added unit tests for permissions, task submission, self-validation, Rapid listeners, and rich-text editing.

Impacted areas for testing

  • Project creation and editing, especially rich-text fields.
  • Project review step and HTML content display.
  • Project task generation, area-unit switching, generate/reset controls, and projects with 450+ or 1,000+ tasks.
  • Project task list filtering, sorting, pagination, selection, locking, and unlocking.
  • Mapper workflow for to_map and to_remap tasks.
  • Validator workflow for to_review tasks, including approve and request-remap paths.
  • Prevention of validating a task last mapped by the same user.
  • Task editor timer, sidebar, tabs, responsive layout, and Rapid upload/submission behavior.
  • Project role-based action visibility and permission-error states.
  • Project cards, status badges, progress indicators, and responsive theme styling.

Screenshots

Screenshot 2026-07-29 at 7 37 13 PM Screenshot 2026-07-29 at 7 39 48 PM Screenshot 2026-07-29 at 7 46 18 PM Screenshot 2026-07-29 at 7 46 29 PM Screenshot 2026-07-29 at 7 46 54 PM Screenshot 2026-07-29 at 7 48 56 PM

Summary

  • Split the task editor into dedicated mapping and review panels, with a reusable sidebar and explicit approve vs “request remap” review flow (including required remap feedback inputs: reason + notes).
  • Centralized task editor state and review payload validation in useTaskEditorContext, and refactored task submission/release to use shared composables (including improved “skip” failure messaging via a skip-specific fallback).
  • Added task lock countdown support (useTaskLockCountdown + formatter) and updated editor UI/status labeling to support the new to_remap task API state.
  • Introduced self-validation prevention so users can’t validate their own task mappings (isTaskSelfValidation), and updated task editor actions/labels accordingly.
  • Reworked project/task permissions handling: added workspace-scoped permission helpers and roleLoadError surfaced from useProjectRole, gated UI/actions with early returns, and added a banner when project permissions fail to load.
  • Improved contributors and role management rules by making “lead” read-only (no lead assignment changes; lead removal behavior locked down), simplifying role options, and optimizing contributor dialog rendering.
  • Implemented scalable task pagination for large projects (>1,000 tasks) via bounded page sizing/concurrent fetching, enriched list items with API status/mapper info, and updated task status normalization/labels (including “More mapping required” wording).
  • Added end-to-end area unit support for both AOI and task-area selection: new AreaDisplayUnit utilities (formatArea, validation, US-locale default), persisted unit preference (useAreaDisplayUnit), and new AreaUnitToggle UI with km²/mi² formatting.
  • Hardened rich-text handling by switching sanitization to a shared sanitizeRichTextHtml helper, refactoring the TipTap editor to use defineModel and improved active-tool detection (including image/table), and updating wizard sanitization payload handling.
  • Improved UI consistency and styling by migrating key components to theme/token-driven SCSS (badges, progress, cards, tabs, surfaces), updating layout/padding behavior (AppPage), and refreshing project card/list progress semantics and legend text.
  • Strengthened cleanup and reliability in the Rapid editor by changing listener registration APIs to return unsubscribe functions (and adding unit tests for unsubscribe behavior).
  • Expanded unit test coverage across permissions/role-loading failures, pagination behavior, task editor context + submission + lock countdown, Rapid listener cleanup, rich-text toolbar active state, and area/unit utilities.

Introduce area display unit support and refine task editor UX and permission checks.

- Add composable useAreaDisplayUnit to persist/display km² or mi², plus formatArea helper and AREA_UNIT_OPTIONS.
- Wire area unit toggle into project-wizard AreaOfInterestStep and TaskSetupPanel, replacing ad-hoc formatting with formatArea; display AOI area in ReviewStep.
- Update RichTextEditor and SettingsStep to use v-model for instructions synchronization.
- Overhaul task editor sidebar: add tabs (Completion / Instructions), review remap flow, lock time remaining display, action disabling/validation for review feedback, status labels, and styling improvements.
- Improve project detail/edit pages: fetch TDEI roles (tdeiUserClient), introduce useWorkspaceProjectPermissions (in useProjectRole), gate edit/management actions and UI (contributors, activation, edit button) based on workspace/project permissions.
- Misc UI/text updates: change "More mapping needed" → "More mapping required", adjust sort labels, remove duplicate "Lead" role option in AddContributorDialog, and several CSS/layout tweaks.
- Add unit tests for area display unit and project service behavior and update related types/util functions.

These changes centralize area unit logic, improve mapping/review flows, and tighten role-based UI/operation gating.
Introduce new task-editor UI components (Sidebar, ReviewPanel, MappingPanel) and an AreaUnitToggle component, and wire them into project wizard steps and task setup. Add composables for task editor state and flows (useTaskEditorContext, useTaskEditorSubmission, useTaskLockCountdown) plus related types. Extract area and rich-text helpers into util/area.ts and util/rich-text.ts and update RichTextContent and RichTextEditor to use the sanitization and improved active-tool tracking. Update useAreaDisplayUnit to delegate formatting/locale logic to util/area and simplify its API. Add unit tests for new composables/utilities and register BTabs in nuxt.config. These changes modularize the task editor UI, centralize area/HTML handling, and encapsulate submission/locking logic.
Prevent a race when attaching uploaded OSM changesets by adding a changesetAttachSequence counter: capture a sequence per attach call and ignore stale success/error/finally handling so only the latest attempt updates state/isSubmittingChangeset.

Make project creation surface TDEI role load failures by throwing a createError on failure instead of returning an empty array.

Update TdeiUserClient.getMyRolesForProjectGroupById to call the project-group-roles endpoint with paging and parse the JSON items directly (replacing the previous getMyProjectGroups call).
Delete the nested action buttons and their related CSS from ProjectCard.vue and ProjectListRow.vue, simplifying the stretched-link pattern. Comments about accessibility were tightened to note the stretched <nuxt-link> as the card/row link target. Removed .project-card-menu and .project-list-menu-button rules and the action column from the list-row grid (including responsive variant) and eliminated a duplicated CSS block. Overall cleanup reduces z-index positioning hacks and markup/CSS complexity for project cards and list rows.
Introduce new theme tokens and replace hardcoded colors/sizes with variables; standardize spacing units (rem) across many components. Add AppPage padding prop and apply to several pages. Improve list rendering by exposing computed display arrays (validators, users, tasks) and move role/label resolution into computed properties. Add roleLoadError to useProjectRole and avoid redundant project-role fetches for workspace leads. Implement batched task page fetching in WorkspaceProjectsClient with TASK_PAGE_SIZE_MAXIMUM and concurrency to avoid large bursts. Add util/task-access and several unit tests; tidy task-editor lifecycle by storing/cleanup of listener handles. Misc: small API/signature and import cleanups, accessibility and copy/error UI tweaks.
Prevent changing or removing the project "lead" role and refine role-selection UI/logic. Changes remove the 'Lead' option from assignable role lists, replace role-check helpers with isAssignableProjectRole (excluding 'lead'), and guard add/update/remove flows so contributors with role === 'lead' cannot be reassigned or deleted. UI updates show a readonly "Lead" label instead of a selectable control for leads, add corresponding styles, and adjust search-result/list styling and overflow behavior. Small validations were added to stop invalid role assignments during add/update operations.
@coderabbitai

coderabbitai Bot commented Jul 30, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The PR adds area-unit preferences, permission-aware project workflows, reusable task-editor components and composables, paginated task loading, expanded theme tokens, shared rich-text sanitization, and tests for the new behavior.

Changes

Shared display and wizard flow

Layer / File(s) Summary
Shared contracts and display utilities
assets/scss/theme.scss, util/*, composables/useAreaDisplayUnit.ts, components/project-wizard/*, pages/workspace/[id]/projects/create.vue
Area units, rich-text sanitization, typed page padding, wizard AOI display, review summaries, editor synchronization, and theme tokens are added or updated.

Permission-aware project workflows

Layer / File(s) Summary
Permission-aware project workflows
composables/useProjectRole.ts, composables/useProjectEditMembers.ts, services/tdei.ts, pages/workspace/[id]/projects/*, components/workspace-project-details/*
Project-group permissions gate project creation, editing, activation, contributor management, and task actions; lead contributors are rendered as read-only and cannot be reassigned or removed.

Task editor flow

Layer / File(s) Summary
Task editor flow
types/task-editor.ts, composables/useTaskEditor*.ts, composables/useTaskLockCountdown.ts, components/task-editor/*, pages/.../tasks/[taskId]/editor.vue, services/rapid.ts
Task review/remap state, feedback validation, submission and unlock actions, changeset attachment sequencing, lock countdowns, sidebar presentation, and Rapid listener cleanup are centralized.

Task data and project presentation

Layer / File(s) Summary
Task data and project presentation
types/projects.ts, services/projects.ts, util/task-*.ts, components/workspace-project-details/*, components/workspace-projects/*
Task statuses and pagination are expanded, self-validation detection is added, area-aware task setup is introduced, and project/task styling and progress displays use theme tokens.

Behavioral validation and integration support

Layer / File(s) Summary
Behavioral validation and integration support
test/unit/**/*, nuxt.config.ts
Tests cover editor synchronization, permissions, task-editor state and submission, lock formatting, pagination, Rapid subscriptions, area utilities, and task access; Bootstrap tabs are added to Vite dependency optimization.

Estimated code review effort: 5 (Critical) | ~120 minutes

Possibly related PRs

Suggested reviewers: susrisha

Poem

A rabbit hops through forms and flows,
With area units in tidy rows.
Tasks submit, locks count down bright,
Leads rest read-only, roles set right.
New tokens paint the pages’ glow—
“Ship it,” whispers the rabbit low.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 6.25% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is clearly related to the main changes: task workflows, permissions, pagination, and UI updates.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/project-wizard/RichTextEditor.vue`:
- Around line 62-69: Add image and table mappings to ACTIVE_TOOL_NAMES so
updateActiveTools recognizes their active selections, then extend the editor
test to verify inserted or selected images and tables activate the corresponding
toolbar buttons.

In `@composables/useTaskEditorSubmission.ts`:
- Around line 174-192: Parameterize resolveTaskSubmitErrorMessage with an
appropriate fallback message, and update releaseTask’s catch block to use an
unlock/skip-specific fallback instead of “Task submission failed.” Preserve the
existing submission fallback for other callers.

In `@pages/workspace/`[id]/projects/[projectId]/edit.vue:
- Around line 537-550: Update the myTdeiRoles lookup in the project edit
permission flow to stop catching role-request failures and replacing them with
an empty array. Let getMyRolesForProjectGroupById errors propagate as load
failures, while preserving the existing canEditProjectMetadata authorization
check for successful lookups.

In `@services/projects.ts`:
- Around line 339-380: Remove all trailing commas introduced in the
services/projects.ts block around fetchPage, URLSearchParams, _get, and
pagination calls, while preserving semicolons. Also remove the trailing comma
after the final Completed option in
components/workspace-project-details/TasksTab.vue (lines 234-240); update both
sites to comply with commaDangle: 'never'.

In `@util/rich-text.ts`:
- Around line 3-5: Remove every newly introduced trailing comma and retain
semicolons in the affected code. Update the object property in
util/rich-text.ts:3-5; type import, function parameters, and formatArea
arguments in services/project-wizard-review.ts:5-8, 24-28, 43-48; final object
and call arguments in
components/project-wizard/steps/AreaOfInterestStep.vue:195-207; mapped-object
property in ReviewStep.vue:108-113; object properties in
SettingsStep.vue:121-132; array/object, extension/nested-object, callback, and
constructor arguments in components/project-wizard/RichTextEditor.vue:52-77,
79-114, 116-147; computed-call arguments in
components/workspace-project-details/TaskSetupPanel.vue:244-258; role-fetch,
permission-call, and filter callback arguments in
pages/workspace/[id]/projects/[projectId]/edit.vue:537-543, 565-569; and
role-fetch, permission-call, computed callback, and review-summary arguments in
pages/workspace/[id]/projects/create.vue:223-232, 307-314, 333-338. Preserve all
existing behavior while ensuring no affected list, object, import, parameter, or
call ends with a trailing comma.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ed856fe2-a9ac-4568-9147-f2f16eaf1a04

📥 Commits

Reviewing files that changed from the base of the PR and between 81f5144 and 10007cb.

📒 Files selected for processing (51)
  • assets/scss/theme.scss
  • components/AppPage.vue
  • components/AreaUnitToggle.vue
  • components/project-wizard/RichTextEditor.vue
  • components/project-wizard/steps/AreaOfInterestStep.vue
  • components/project-wizard/steps/ReviewStep.vue
  • components/project-wizard/steps/SettingsStep.vue
  • components/task-editor/MappingPanel.vue
  • components/task-editor/ReviewPanel.vue
  • components/task-editor/Sidebar.vue
  • components/workspace-project-details/AddContributorDialog.vue
  • components/workspace-project-details/ContributorsTab.vue
  • components/workspace-project-details/ProjectMap.vue
  • components/workspace-project-details/RichTextContent.vue
  • components/workspace-project-details/TaskSetupPanel.vue
  • components/workspace-project-details/TasksTab.vue
  • components/workspace-projects/ProjectCard.vue
  • components/workspace-projects/ProjectListRow.vue
  • components/workspace-projects/StatusBadge.vue
  • composables/useAreaDisplayUnit.ts
  • composables/useProjectEditMembers.ts
  • composables/useProjectRole.ts
  • composables/useTaskEditorContext.ts
  • composables/useTaskEditorSubmission.ts
  • composables/useTaskLockCountdown.ts
  • nuxt.config.ts
  • pages/workspace/[id]/projects/[projectId]/edit.vue
  • pages/workspace/[id]/projects/[projectId]/index.vue
  • pages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vue
  • pages/workspace/[id]/projects/create.vue
  • pages/workspace/[id]/projects/index.vue
  • services/project-wizard-payload.ts
  • services/project-wizard-review.ts
  • services/projects.ts
  • services/rapid.ts
  • services/tdei.ts
  • test/unit/components/RichTextEditor.test.ts
  • test/unit/composables/useProjectRole.test.ts
  • test/unit/composables/useTaskEditorContext.test.ts
  • test/unit/composables/useTaskEditorSubmission.test.ts
  • test/unit/composables/useTaskLockCountdown.test.ts
  • test/unit/services/projects.test.ts
  • test/unit/services/rapid.test.ts
  • test/unit/util/area.test.ts
  • test/unit/util/task-access.test.ts
  • types/projects.ts
  • types/task-editor.ts
  • util/area.ts
  • util/rich-text.ts
  • util/task-access.ts
  • util/task-status.ts

Comment thread components/project-wizard/RichTextEditor.vue
Comment thread composables/useTaskEditorSubmission.ts
Comment thread pages/workspace/[id]/projects/[projectId]/edit.vue
Comment thread services/projects.ts
Comment thread util/rich-text.ts
Update rich text editor to treat image and table tools as active (add mappings and tests). Make useTaskEditorSubmission pass a skip-specific fallback message and allow custom fallback messages from resolveTaskSubmitErrorMessage; add unit test for skip failure. Also include minor formatting/whitespace cleanups across components, pages, services, and utils.
@shweta2101
shweta2101 requested a review from susrisha July 30, 2026 13:17
Add documentation describing who can manage workspace projects and work on project tasks. The new docs/workspace-project-role-based-access.md covers role types (project-group POC, workspace role, project role), the effective project role resolution, detailed project and task permission matrices, contributor management rules, and implementation pointers to composables/useProjectRole.ts and pages/workspace/[id]/projects/[projectId]/index.vue.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/workspace-project-role-based-access.md`:
- Around line 17-25: Update the task-access role matrix in the documentation to
state that POC permissions do not determine the effective task role. Clarify
that mapping and validation require an effective workspace or project role,
while POC access is limited to the separately documented project-management
permissions; apply the same clarification to the related example or guidance
around the later referenced section.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6f278b1b-d6df-42be-a85b-a55e52f38187

📥 Commits

Reviewing files that changed from the base of the PR and between ef1288f and 7f41165.

📒 Files selected for processing (1)
  • docs/workspace-project-role-based-access.md

Comment on lines +17 to +25
Task access is based on the user's effective project role:

1. A workspace `lead` is always treated as a `lead`.
2. Otherwise, the project role is used when one is assigned.
3. If there is no project role, the workspace role is used.
4. If neither role exists, the user has read-only access.

For example, assigning a project `validator` role to a workspace
`contributor` allows that user to validate tasks in that project.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win

Clarify that POC permissions do not define the effective task role.

useProjectRole.ts computes task capabilities only from workspace/project roles; “tasking role” is not defined here, and a POC without either role would otherwise appear read-only under lines 17–22. Make the matrix explicit that mapping/validation require an effective workspace/project role, while POC access is limited to the separately documented project-management permissions.

Suggested wording
-| Map tasks | With a tasking role | Yes | Yes | Yes | Yes |
-| Validate tasks | With a lead or validator role | Yes | Yes | Yes | No |
+| Map tasks | Only with an effective workspace/project role | Yes | Yes | Yes | Yes |
+| Validate tasks | Only with an effective workspace/project lead or validator role | Yes | Yes | Yes | No |

Also applies to: 37-38

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/workspace-project-role-based-access.md` around lines 17 - 25, Update the
task-access role matrix in the documentation to state that POC permissions do
not determine the effective task role. Clarify that mapping and validation
require an effective workspace or project role, while POC access is limited to
the separately documented project-management permissions; apply the same
clarification to the related example or guidance around the later referenced
section.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant